<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="shortcut icon" href="images/img8/花店-百合.png">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <!-- 引入bootstrap样式 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- 引入自己的样式 -->
  <link rel="stylesheet" href="css/personal.css">
  <!-- 引入jquery js 文件 -->
  <script src="bootstrap/js/jQuery.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
  <!-- 顶部 -->
  <div class="top">
    <div class="w topheader">
      <!-- 顶部左侧导航栏开始-->
      <div class="topnav">
        <ul>
          <li><a href="index.html" target="_blank">星瀚官网</a></li>
          <li><a href="index.html">星瀚花城</a></li>
          <li><a href="https://home.miui.com/" target="_blank">XIHI</a></li>
          <li><a href="https://iot.mi.com/" target="_blank">IoT</a></li>
          <li><a href="https://i.mi.com/" target="_blank">云服务</a></li>
          <li><a href="https://airstar.com/" target="_blank">星瀚数科</a></li>
          <li><a href="https://www.xiaomiyoupin.com/" target="_blank">有品</a></li>
          <li><a href="https://xiaoai.mi.com/" target="_blank">星瀚开放平台</a></li>
          <li><a href="https://qiye.mi.com/" target="_blank">企业团购</a></li>
          <li><a href="https://www.mi.com/" target="_blank">资质证照</a></li>
          <li><a href="https://www.mi.com/" target="_blank">协议规则</a></li>
          <li><a href="https://www.mi.com/" target="_blank">下载app</a></li>
          <li><a href="javascript:;">Selection&nbsp;Location</a></li>
        </ul>
      </div>
      <!-- 顶部左侧导航栏结束 -->
      <!-- 顶部右侧导航栏开始 -->
      <div class="topnav2">
        <ul>
          <li>
            <a href="javascript:;" class="username">噬空星月<img src="images/personal/user.jpg" alt="user"
                class="img-circle"></a>
            <ul>
              <li><a href="javascript:;">个人中心</a></li>
              <li><a href="javascript:;">评价晒单</a></li>
              <li><a href="javascript:;">我的喜欢</a></li>
              <li><a href="javascript:;">星瀚账号</a></li>
              <li><a href="javascript:;">退出登录</a></li>
            </ul>
          </li>
          <li><a href="#">消息通知</a></li>
          <li><a href="shopping-cart.html">我的订单</a></li>
        </ul>
      </div>
      <!-- 顶部右侧导航栏结束 -->
      <!-- 购物车 -->
      <div class="shop">
        <ul>
          <li>
            <a href="shopping-cart.html" target="_blank">
              <img src="images/img2/购物车空.png" alt="">
              购物车&nbsp;(0)
            </a>
            <ul>
              <li>购物车中还没有商品，赶紧选购吧！</li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 购物车结束 -->
    </div>
  </div>
  <!-- 头部 -->
  <div class="headerfather">
    <div class="header w">
      <!-- 小米logo -->
      <div class="logo">
        <img src="images/img8/logo.png" alt="">
      </div>
      <!-- 头部导航栏 -->
      <div class="headernav">
        <ul>
          <li>
            <a href="#">星瀚鲜花</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">花束</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body20.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body22.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">礼盒</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">蛋糕</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">花篮</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">绿植</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">周花</a>
            <ul>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body14.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body16.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body18.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body19.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li>
                <a href="phone.html">
                  <img src="images/img8/body07.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
              <li class="lastchild">
                <a href="phone.html">
                  <img src="images/img8/body08.jpg" alt="">
                  <span>
                    Xiaomi 13 Ultra 限量定制色
                  </span>
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="https://www.mi.com/" target="_blank">服务中心</a>
          </li>
          <li>
            <a href="javascript:;">社区</a>
          </li>
      </div>
      <!-- 头部右侧搜索框 -->
      <div class="search">
        <!-- <input type="text" value="输入关键字">
          <button>
          </button> -->
        <div class="icon"></div>
        <div class="textInput">
          <input type="text" placeholder="search something here...">
          <input type="submit" value="go" id="go">
          <div class="clear"></div>
        </div>
      </div>
      <script>
        let $ = tName => {
          return document.querySelector(tName);
        }
        let oSearch = $('.search');
        let oIcon = $('.icon');
        let oClear = $('.clear');
        let oText = $('input[type="text"]');
        // 绑定事件
        // 收缩
        oIcon.addEventListener('mouseenter', () => {
          oSearch.classList.toggle('changeWidth');
        })
        // 清空内容
        oClear.addEventListener('click', () => {
          oText.value = '';
        })
      </script>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="blank col-md-2">
        <a href="javascript:;">首页</a>&nbsp;&nbsp;/&nbsp;&nbsp;个人中心
      </div>
    </div>
    <div class="row">
      <div class="leftnav col-md-2">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne">
                  个人中心
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                我的个人中心
              </div>
              <div class="panel-body">
                消息通知
              </div>
              <div class="panel-body">
                购买资格
              </div>
              <div class="panel-body">
                现金账户
              </div>
              <div class="panel-body">
                星瀚礼品卡
              </div>
              <div class="panel-body">
                现金券
              </div>
              <div class="panel-body">
                喜欢的商品
              </div>
              <div class="panel-body">
                优惠券
              </div>
              <div class="panel-body">
                收货地址
              </div>
              <div class="panel-body">
                红包
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                  aria-expanded="false" aria-controls="collapseTwo">
                  订单中心
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                我的订单
              </div>
              <div class="panel-body">
                评价晒单
              </div>
              <div class="panel-body">
                会员卡充值订单
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                  aria-expanded="false" aria-controls="collapseThree">
                  售后服务
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                服务记录
              </div>
              <div class="panel-body">
                申请服务
              </div>
              <div class="panel-body">
                领取快递报销
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingFour">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"
                  aria-expanded="false" aria-controls="collapseFour">
                  账户管理
                </a>
              </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
              <div class="panel-body">
                个人信息
              </div>
              <div class="panel-body">
                修改密码
              </div>
              <div class="panel-body">
                注销服务
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-10 right">
        <div class="user-card">
          <div class="img">
            <img src="images/personal/user.jpg" alt="..." class="img-circle">
          </div>
          <h2>噬空星月</h2>
          <p>你好呀~</p>
          <a href="javascript:;" data-toggle="modal" data-target=".mymodal">修改个人信息></a>
          <!-- 模态框开始 -->
          <div class="modal fade mymodal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                      aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">修改个人信息</h4>
                </div>
                <div class="modal-body">
                  <p>
                  <form>
                    <div class="form-group">
                      <label for="exampleInputText1">新用户名</label>
                      <input type="text" class="form-control" id="exampleInputText1" placeholder="Username">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputEmail1">邮箱地址</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">新密码</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-group">
                      <label for="exampleInputTel1">电话</label>
                      <input type="tel" class="form-control" id="exampleInputTel1" placeholder="Tel">
                    </div>
                  </form>
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary">保存</button>
                </div>
              </div>
            </div>
          </div>
          <!-- 模态框结束 -->
          <ul>
            <li>账户安全：普通</li>
            <li>绑定手机： 177******21</li>
            <li>绑定邮箱： 未绑定</li>
          </ul>
        </div>
        <div class="action">
          <ul>
            <li><a href="javascript:;"><img src="images/personal/action1.png" alt="" class="img-circle"></a>
              <h2>待支付的订单：<span>0</span></h2>
              <p><a href="javascript:;">查看待支付订单></a></p>
            </li>
            <li><a href="javascript:;"><img src="images/personal/action2.png" alt="" class="img-circle"></a>
              <h2>待收货的订单：<span>1</span></h2>
              <p><a href="orderquery.html" target="_blank">查看待收货订单></a></p>
            </li>
            <li><a href="javascript:;"><img src="images/personal/action3.png" alt="" class="img-circle"></a>
              <h2>待评价商品数：<span>0</span></h2>
              <p><a href="javascript:;">查看待评价商品></a></p>
            </li>
            <li><a href="javascript:;"><img src="images/personal/action4.png" alt="" class="img-circle"></a>
              <h2>喜欢的商品：<span>0</span></h2>
              <p><a href="javascript:;">查看喜欢的商品></a></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->

  <!-- /尾部 -->
  <!-- <div class="bottom">
        <img src="images/img2/bottom.jpg" alt="">
    </div> -->
  <footer>
    <div class="bottom">
      <div class="footer-service w">
        <ul>
          <li><a href="javascript:;">预约维修服务</a></li>
          <li><a href="javascript:;">7天无理由退货</a></li>
          <li><a href="javascript:;">15天免费换货</a></li>
          <li><a href="javascript:;">满69元包邮</a></li>
          <li><a href="javascript:;">1100余家售后网点</a></li>
        </ul>
      </div>
      <div class="footer-links w">
        <dl>
          <dt>选购指南</dt>
          <dd><a href="javascript:;">鲜花</a></dd>
          <dd><a href="javascript:;">花束</a></dd>
          <dd><a href="javascript:;">绿植</a></dd>
          <dd><a href="javascript:;">礼盒</a></dd>
          <dd><a href="javascript:;">仙女</a></dd>
        </dl>
        <dl>
          <dt>服务中心</dt>
          <dd><a href="javascript:;">申请售后</a></dd>
          <dd><a href="javascript:;">售后政策</a></dd>
          <dd><a href="javascript:;">订单查询</a></dd>
          <dd><a href="javascript:;">保障服务</a></dd>
          <dd><a href="javascript:;">防伪查询</a></dd>
        </dl>
        <dl>
          <dt>线下门店</dt>
          <dd><a href="javascript:;">服务网点</a></dd>
          <dd><a href="javascript:;">授权体验店</a></dd>
          <dd><a href="javascript:;">专区</a></dd>
          <dd><a href="javascript:;">河北分店</a></dd>
          <dd><a href="javascript:;">北京总部</a></dd>
        </dl>
        <dl>
          <dt>关于星瀚</dt>
          <dd><a href="javascript:;">配送说明</a></dd>
          <dd><a href="javascript:;">服务条款</a></dd>
          <dd><a href="javascript:;">订花流程</a></dd>
          <dd><a href="javascript:;">支付方式</a></dd>
          <dd><a href="javascript:;">隐私条款</a></dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd><a href="javascript:;">新浪微博</a></dd>
          <dd><a href="javascript:;">官方微信</a></dd>
          <dd><a href="javascript:;">联系我们</a></dd>
          <dd><a href="javascript:;">公益基金会</a></dd>
          <dd><a href="javascript:;">全国热线：400-060</a></dd>
        </dl>
      </div>
    </div>
    <div class="footer-bottom w">
      <p>
      <div id="one">Copyright©2023&nbsp;河北星瀚科技有限公司&nbsp;</div>
      <div id="two"><a href="javascript:;">冀ICP备20016463号-2</a></div>
      </p>
    </div>
  </footer>
  <!-- 页面固定定位 -->
  <div class="house">
    <div class="ad1 ad">
      <div class="img">
        <img src="images/img7/serve1.png" alt="" class="before">
        <img src="images/img7/serve01.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">手机app</p>
    </div>
    <div class="ad2 ad">
      <div class="img">
        <img src="images/img7/serve2.png" alt="" class="before">
        <img src="images/img7/serve02.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">个人中心</p>
    </div>
    <div class="ad3 ad">
      <div class="img">
        <img src="images/img7/serve3.png" alt="" class="before">
        <img src="images/img7/serve03.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">售后服务</p>
    </div>
    <div class="ad4 ad">
      <div class="img">
        <img src="images/img7/serve4.png" alt="" class="before">
        <img src="images/img7/serve04.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">人工客服</p>
    </div>
    <div class="ad5 ad">
      <div class="img">
        <img src="images/img7/serve5.png" alt="" class="before">
        <img src="images/img7/serve05.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">购物车</p>
    </div>
    <div class="ad6 ad goBack" style="display: none;">
      <div class="img">
        <img src="images/img7/totop.png" alt="" class="before">
        <img src="images/img7/totop_hover.png" alt="" style="display: none;" class="after">
      </div>
      <p class="f">返回顶部</p>
    </div>
  </div>
</body>

</html>